<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style> 
 *{ margin:0; padding:0; list-style:none;}    
 #box{ width:840px; border:1px solid #000; height:210px; margin:30px auto; position:relative; overflow:hidden;}    
 #box ul{ position:absolute; left:0; top:0;}    
 #box ul li{ width:200px; height:200px; float:left; padding:5px;}    
</style>    
<script>    
window.onload=function(){    
	var oBox=document.getElementById('box');    
	var oUl=oBox.children[0];    
	var aLi=oUl.children;    
	    
	//复制一份内容 ，制作出无缝的效果   
	oUl.innerHTML+=oUl.innerHTML;    
	oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';    
	    
	setInterval(function(){   //开定时器，这样就可以自己切换，无需人工干预。 
		var l=oUl.offsetLeft-10;  //图片切换，就是移动距离
		if(l<=-oUl.offsetWidth/2){    
			l=0;    
		}    
		oUl.style.left=l+'px';    
	},30);    
};    
</script>    
</head>

<body>
<div id="box">    
    <ul>    
   	   <li><img src="图片/荷花.jpg" width="220"height="200"></li>    
       <li><img src="图片/新风景.jpg" width="220"height="200"></li>    
       <li><img src="图片/渔舟唱晚.jpg" width="220"height="200"></li>    
       <li><img src="图片/winter.jpg"width="220" height="200"/> </li> 
   </ul>    
</div>
</body>
</html>
